<script setup>
import { onMounted, reactive, ref } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import columnApi from '@/api/content/ColumnApi'
import DUploadImage from '@/components/DUploadImage.vue'
import DUploadAttach from '@/components/DUploadAttach.vue'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false, //
  loading: false, // 加载开关
  parentOptions: [],
})
// 表单结构
const original = {
  id: '',
  parentId: 0, // 父ID parentId
  name: '',
  channelId:0,
  channelName: '',
  type: '',
  link: '',
  keywords: '',
  idx: 0,
  thumb: '',
  images: [],
  notes: ''
}
// 表单数据
const formState = reactive({})

// 表单 处理
const { onCancel, onFinish, InitializeData } = useFormEvent({state: state, remoteApi: columnApi, formState: formState, original: original, formRef: formRef})

// 重写初始化
const initializationData = primaryKey=>{
  InitializeData(primaryKey).then(()=>{
    // console.info('重写初始化')
    formState.thumb = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    formState.images = [
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    ]
  })
}

// 向父组件暴露方法和属性
defineExpose({ InitializeData: initializationData })
// 加载页时初始化选项等基础数据
onMounted(() => {
  columnApi.getTreeOptions().then(res => {
    state.parentOptions.push(res.data)
  })
})

</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`栏目管理`"
    placement="right"
    :width="'50%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <!-- 表单内容 begin -->
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10}"
        :scroll-to-first-error="true"
        :validate-on-rule-change="false"
        @finish="onFinish"
      >
        <a-row>
          <a-col :span="24">
            <a-col :span="24">
              <a-form-item
                label="所属栏目" name="parentId" :label-col="{span:3}" :rules="[{ required: true, message: '请选择所属栏目' }]">
                <a-tree-select
                  v-model:value="formState.parentId"
                  placeholder="所属栏目" show-search allow-clear
                  tree-default-expand-all
                  :tree-data="state.parentOptions" />
              </a-form-item>
            </a-col>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="名称" name="name" :label-col="{span:3}" :rules="[{ required: true, message: '请输入名称!' }]">
              <a-input v-model:value="formState.name" show-count :minlength="2" :maxlength="120" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="所属频道" name="channelId" :label-col="{span:3}" :rules="[{ required: true, message: '请选择所属频道!' }]">
              <a-select v-model:value="formState.channelId" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="关键字" name="keywords" :label-col="{span:3}" :rules="[{ required: true, message: '请输入关键字!' }]">
              <a-input v-model:value="formState.keywords" show-count :minlength="2" :maxlength="120" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="缩图" name="thumb" :label-col="{span:3}" :rules="[{ required: true, message: '请输入缩图!' }]">
              {{ formState.thumb }}
              <a-alert message="Warning Text" type="warning" banner />
              <d-upload-image v-model:value="formState.thumb" :max-size="3.3" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="轮播图" name="images" :label-col="{span:3}" :wrapper-col="{span:20}" :rules="[{ required: true, message: '请输入轮播图!' }]">
              <d-upload-attach v-model="formState.images" :max-size="1" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="类型" name="type" :label-col="{span:3}" :rules="[{ required: true, message: '请输入类型!' }]">
              <a-radio-group v-model:value="formState.type" button-style="solid">
                <a-radio-button value="none">常规</a-radio-button>
                <a-radio-button value="url">链接</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-if="formState.type=='url'" :span="24">
            <a-form-item label="链接" name="link" :label-col="{span:3}">
              <a-input v-model:value="formState.link" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="排序" name="idx" :rules="[{ required: true, message: '请输入排序'}]">
              <a-input-number v-model:value="formState.idx" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 20}"
            >
              <a-textarea v-model:value="formState.notes" show-count />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item name="id">
              <a-space wrap>
                <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                <a-button size="large" block @click="onCancel">取消</a-button>
                <a-input v-model:value="formState.id" type="hidden" />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-drawer>
</template>